<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .clist {
        width: 500px;
      }
      .clist .item {
        display: flex;
        justify-content: space-between;
      }
      .start {
        width: 100px;
      }
      .mid {
        width: 100px;
      }
      .mid img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    全选：<input type="checkbox" name="" id="isAll" />
    <div class="clist">
      <!-- <div class="item">
        <div class="start">
          <input type="checkbox" name="" id="" />
        </div>
        <div class="mid">
          <img
            src="https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg"
            alt=""
          />
        </div>
        <div class="end">
          <p>名字</p>
          <p>价格</p>

          <div><button>+</button> <span>1</span> <button>-</button></div>

          <div>
            <button>删除</button>
          </div>
        </div>
      </div> -->
    </div>

    <!-- 行内的js--行内事件 -->
    <button onclick="fn()">ann</button>
    <script>
      function fn() {
        console.log("点击了按钮");
      }
      // 商品数据 或者购物车数据 --  mock数据，模拟数据
      //      （通过调用后端的接口来获取的--后端提供接口文档给前端）

      //团队成员介绍
      // 大前端
      //---前端工程师---》开发页面-》网站 --web端--- 小程序 -app-后端 -》 html + css + js  ts vue
      //   jq layui--c#
      //---javascript -> typescript   --- typescript = js+类型
      //---------跨端开发--js--》一套代码能生成好多app--安卓app-》iosApp-》移动端网站--小程序-- 省钱--省事
      //-----------rn ReactNative-  uniapp  -  --中小型公司--外包公司
      //---安卓工程师--》安卓系统--》原生app--》java-kt
      //---iOS工程师，苹果开发--》iOS系统--》原生app-》oc-- object-c--swift
      //---鸿蒙工程师--鸿蒙系统---》原生app -》 artTS -》ts -》  js
      //后端
      //---java---php--c#-----
      //--------nodejs--js运行时---》能做后端--写前端中工具

      //   let a = 1;
      //   a = 'aaa'
      //   let a: number = 1;

      //UI设计
      // 设计稿--app设计
      //产品经理
      //---产品的核心--app--张小龙
      //whatsapp

      //-----项目经理
      //-----运营

      function box(usenrame) {}

      //  加密混淆代码--工具--都是nodejs编写的混淆加密工具
      function box(u) {}

      //假设打开页面，获取到当前用户的购物车数据--数组
      var cartArr = [
        {
          //唯一标识
          cid: 22211,
          pname: "小米su7",
          price: 210000,
          imgUrl:
            "https://s1.xiaomiev.com/activity-outer-assets/0328/images/su7/su7_1.jpg",
          num: 1,
          //是否勾选的 状态 数组中也有属性 记录
          isSelected: true,
        },
        {
          //唯一标识
          cid: 211,
          pname: "秦L",
          price: 98000,
          imgUrl:
            "https://ecmb.bdimg.com/tam-ogel/868558253_1500824529_1600_1200.jpg",
          num: 2,
          isSelected: true,
        },
      ];
      // 6-2

      // 读取本地cartArr，判断本地是否有数据--
      // 如果有用本地替换cartArr初始值】
      var cartArrJSONStr = localStorage.getItem("cartArr");
      console.log(cartArrJSONStr);
      if (cartArrJSONStr != null) {
        // 有数据
        // 如果有用本地替换cartArr初始值】
        cartArr = JSON.parse(cartArrJSONStr);
      }

      /*
        1-列表-购物车列表---把购物车数据 -展示到页面中
        2-删除功能
          点击删除按钮的时候，删除数组中一个元素，刷新列表
        3-数量加减
          点击加减按钮的时候，修改数组中对应的一个元素的num属性，刷新列表
        4-单选--全选 --总价计算，小计
         单选1-：根据cartArr数组中的元素的isSelected属性，来控制 loadlist里面的 单选input，是否有checked属性
         单选2-:改变单选状态--修改数组中元素的isSelected属性， 刷新列表
              input  change事件触发的事件


             行内事件
             <div class="start">
              <input  onchange="selectChange(${
                v.cid
              },${i})" type="checkbox" name="" id="" ${
            v.isSelected ? "checked" : ""

      5-    全选


                5-1 全选按钮 点击 影响下面所有的单选
                   给全选按钮添加点击事件，点击的时候
                    根据全选按钮的状态，改变数组中所有元素的isSelected，刷新列表
                5-2 单选按钮 点击 影响上面的全选
                    loadList中 判断数组中所有元素的状态（every），改变 全选按钮的状态
        6-数据持久化
                6-1-什么时候存入数据--只要数据修改--就把cartArr 就把cartArr存入本地
                6-2-什么时候读取数据  一打开页面，只要发现本地有 cartArr数据，就读取，本地数据替换cartArr的初始值

                    */

      /*
        1- 遍历购物车数组--拼接字符串--
            1-先写一个静态的商品列表，
            2-遍历购物车数组--拼接字符串，，把静态页面，改成动态的

          } />
      */
      function loadList() {
        var listStr = "";
        cartArr.forEach(function (v, i) {
          // 循环一次 就会得到一个新的div 拼接到 listStr上

          // 4-单选
          // 据cartArr数组中的元素的isSelected属性，
          // 来控制 loadlist里面的 单选input，是否有checked属性
          // var res = "";
          // if (v.isSelected == true) {
          //   res = "checked";
          // }

          listStr += `
            <div class="item">
            <div class="start">
              <input  onchange="selectChange(${
                v.cid
              },${i})" type="checkbox" name="" id="" ${
            v.isSelected ? "checked" : ""
          } />
            </div>
            <div class="mid">
              <img
                src="${v.imgUrl}"
                alt=""
              />
            </div>
            <div class="end">
              <p>${v.pname}</p>
              <p>${v.price}</p>

              <div><button onclick="jiaClick(${v.cid},${i})">+</button> <span>${
            v.num
          } </span> <button  onclick="jianClick(${v.cid},${i})">-</button></div>

              <div>
                <button onclick="delClick(${v.cid},${i})">删除</button>
              </div>
            </div>
          </div>
        `;
        });
        //循环结束以后，listStr就会有多个 div.item

        // 获取clist，改变内容
        var clist = document.querySelector(".clist");
        clist.innerHTML = listStr;

        //5-2  单选按钮 点击 影响上面的全选
        //  -- 判断数组中所有元素的isSelected 是否都为true
        // ，如果都为true 全选被选中，反之，全选不能被选中
        var isAll = cartArr.every(function (v, i) {
          // 返回值 每一个元素的判断条件
          return v.isSelected == true;
        });
        console.log("isAll", isAll);
        //改变全选按钮的状态
        var isAllInput = document.querySelector("#isAll");
        isAllInput.checked = isAll;

        // 6-1 只要loadlist 调用了，cartArr中数据就有可能改变了
        //  存入本地(把cartArr转为 json字符串，传入本地)
        localStorage.setItem("cartArr", JSON.stringify(cartArr));
      }

      // 1-列表-购物车列表
      loadList();
      // 2-删除函数
      // <button onclick="delClick()">删除</button>
      //拼接列表字符串的时候，就把事件已经添加了
      //
      function delClick(id, i) {
        //点击的时候获取到了 要删除元素的id 和下标
        console.log("点击了删除按钮");
        console.log(id);
        console.log(i);
        // 1-先删除 数组中元素 -数组中的对象
        //数据驱动页面---》操作数组

        //删除第i位置上的一个元素
        cartArr.splice(i, 1);
        console.log(cartArr);
        //2- 重新根据数组-生成列表
        // 发现cv一大段代码，-将列表功能 -封装了函数
        loadList();
      }

      /*

      3-数量加减
          点击加减按钮的时候，修改数组中对应的对象的num属性，刷新列表

          添加加号按钮，添加一个点击事件
            --行内事件，循环遍历列表的时候
            --<button onclick="jiaClick(${v.cid},${i})">+</button>
            实现 jiaClick函数，全局变量

            加函数内部 拿到了 对应商品的id 和 下标（商品在cartArr中下标）

              修改数组中对应的对象的num属性，刷新列表
              通过id或者下标，找到数组中对应位置对象
      */
      function jiaClick(id, i) {
        console.log(id, i);
        console.log(cartArr[i]);

        // 通过id或者下标，找到数组中对应位置对象
        // cartArr[i].num++
        var obj = cartArr[i];
        //对象的num属性 ++
        obj.num++;
        console.log(cartArr);
        // 根据cartArr 重新生成列表
        loadList();
      }

      // 减函数
      function jianClick(id, i) {
        // 通过id或者下标，找到数组中对应位置对象
        var obj = cartArr[i];
        if (obj.num === 1) {
          //等于1 -- 弹出一个框提示 是否要删除
          var flag = confirm("是否要删除");
          if (flag == true) {
            //点击了确定--
            cartArr.splice(i, 1);
            loadList();
          }
        } else {
          // 不等于--大于1
          obj.num--;
          loadList();
        }
      }

      // 单选2-:改变单选状态--修改数组中元素的isSelected属性， 刷新列表
      //         input  change事件触发的事件

      //        行内事件
      //        <div class="start">
      //         <input  onchange="selectChange(${
      //           v.cid
      //         },${i})" type="checkbox" name="" id="" ${
      //       v.isSelected ? "checked" : ""
      function selectChange(id, i) {
        console.log(id, i);
        // 修改数组中元素的isSelected属性， 刷新列表

        //找到數組中的元素
        var obj = cartArr[i];
        // 取反
        obj.isSelected = !obj.isSelected;
        loadList();
      }

      //   5-1 全选按钮 点击 影响下面所有的单选
      //                给全选按钮添加点击事件，点击的时候
      //                 根据全选按钮的状态，改变数组中所有元素的isSelected，刷新列表
      var isAllInput = document.querySelector("#isAll");
      isAllInput.onchange = function () {
        console.log("onchange");
        console.log(isAllInput.checked);
        // 根据全选按钮的状态，改变数组中所有元素的isSelected，
        cartArr.forEach(function (v) {
          v.isSelected = isAllInput.checked;
        });
        // 刷新列表
        loadList();
      };
    </script>
  </body>
</html>
